<template>
  <f7-page>
    <f7-navbar>
      <f7-nav-left>
        <f7-link back>
          <i class="nav-icon__back f7-icons">chevron_left</i>
        </f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-color">变更工程状态(不需要)</f7-nav-title>
      <f7-nav-right>
        <f7-link actions-open="#actions-one-group">
          <f7-icon f7="house" style="color: #fff">
            <!-- <f7-button large ></f7-button> -->
          </f7-icon>
        </f7-link>
      </f7-nav-right>
    </f7-navbar>
    <div class="head-box">
      <div class="head-project">
        <div class="head-img">
          <img src="static/img/list/icon-list-xiangmu.png" alt="" />
        </div>
        <div class="head-name">{{ name }}</div>
      </div>
    </div>
    <div class="status">
      <qm-field
        label="质量工程状态"
        is-link
        readonly
        @click="openAction('qualityOpenStatusName')"
        :value="qualityOpenStatusName"
      ></qm-field>
      <qm-field
        label="安全工程状态"
        is-link
        readonly
        @click="openAction('safeOpenStatusName')"
        :value="safeOpenStatusName"
      ></qm-field>
    </div>
    <f7-block class="f7-block">
      <qm-upload-picture :params="{}"></qm-upload-picture>
    </f7-block>
    <!-- <div class="buttons toolbar_fixed" >
      <f7-row>
        <f7-button fill>提交</f7-button>
      </f7-row>
    </div> -->
    <!-- <f7-block class="toolbar_fixed">
      <f7-row class="row">
        <f7-col>
          <qm-button :fill="true" type="primary" :round="false" title="提交" ></qm-button>
        </f7-col>
      </f7-row>
     </f7-block> -->
    <f7-toolbar position="bottom">
      <div class="button">
        <!-- <qm-button
          :fill="true"
          type="primary"
          :round="false"
          title="提交"
        ></qm-button> -->
        <f7-button fill>提交</f7-button>
      </div>
    </f7-toolbar>

    <!-- <f7-bottom-buttons slot="fixed" class="toolbar_fixed">
      <f7-row class="page-bottom-btngroup" style="width: 100%">
        <f7-col>
          <qm-button
            fill
            style="margin: 0 auto"
            type="primary"
            size="default"
            title="提交"
            :round="false"
          >
          </qm-button>
        </f7-col>
      </f7-row>
    </f7-bottom-buttons> -->
    <f7-actions ref="action" style="max-height: 50%">
      <!-- 质量工程状态 -->
      <template v-if="currentChooseType === 'qualityOpenStatusName'">
        <f7-actions-group>
          <f7-list class="under-list">
            <li
              v-for="(item, index) in qualityOpenStatusNameList"
              :key="index"
              @click="handleQualityOpenStatusName(item)"
            >
              <a class="item-link item-content">
                <div class="item-inner">{{ item }}</div>
              </a>
            </li>
          </f7-list>
        </f7-actions-group>
      </template>
      <!-- 安全工程状态 -->
      <template v-if="currentChooseType === 'safeOpenStatusName'">
        <f7-actions-group>
          <f7-list class="under-list">
            <li
              v-for="(item, index) in safeOpenStatusNameList"
              :key="index"
              @click="handleSafeOpenStatusName(item)"
            >
              <a class="item-link item-content">
                <div class="item-inner">{{ item }}</div>
              </a>
            </li>
          </f7-list>
        </f7-actions-group>
      </template>
    </f7-actions>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      name: "广州市海珠区广船机械厂让地块配套小学建设",
      qualityOpenStatusName: "在建工程",
      qualityOpenStatusNameList: [
        "在建工程",
        "未开工工程",
        "已竣工验收备案",
        "项目收尾",
        "停工",
        "完工待验收(或安全评定)",
        "未验收投入使用",
        "已安全考评工程",
        "已验收",
      ],
      currentChooseType: "",
      safeOpenStatusName: "在建工程",
      safeOpenStatusNameList: [
        "在建工程",
        "未开工工程",
        "已竣工验收备案",
        "项目收尾",
        "停工",
        "完工待验收(或安全评定)",
        "未验收投入使用",
        "已安全考评工程",
        "已验收",
      ],
    };
  },
  methods: {
    openAction(currentChooseType) {
      this.currentChooseType = currentChooseType;
      this.$refs.action.open();
    },
    closeAction() {
      this.$refs.action.close();
    },
    handleSafeOpenStatusName(data) {
      this.safeOpenStatusName = data;
      this.closeAction();
    },
    handleQualityOpenStatusName(data) {
      this.qualityOpenStatusName = data;
      this.closeAction();
    },
  },
};
</script>

<style lang="less" scoped>
.md {
  --f7-navbar-height: 44px;
  --f7-toolbar-height: 60px;
}
::v-deep.navbar .navbar-bg {
  background-color: var(--color-brand);
}

.navbar .navbar-bg::after,
.navbar .navbar-bg::before {
  display: none;
}

.navbar-inner {
  justify-content: space-between;
  position: relative;
}

.nav-color {
  color: var(--color-text-base) !important;
}

.navbar a.link {
  color: var(--color-text-base);
}

.navbar .right {
  font-size: var(--font-size-subcontent);
}

.nav-icon__back {
  color: var(--color-text-base);
  font-size: 18px !important;
}

/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
  background-color: #f0f2f5;
}

.head-box {
  padding-bottom: calc(15px * var(--ratio));
  background-color: #f0f2f5;
  .head-project {
    background-color: #f7faff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(25px * var(--ratio)) calc(10px * var(--ratio));
    .head-img {
      width: 30px;
      height: 30px;
      margin-right: calc(15px * var(--ratio));
      img {
        width: 30px;
        height: 30px;
      }
    }
    .head-name {
      // font-size: var(--font-size-subtitle);
      font-size: 15px;
    }
  }
}
.status {
  margin: calc(20px * var(--ratio)) 0;
  .under-list {
    margin: 0;
  }
}
.f7-block {
  margin: 0;
  padding: 0;
  padding: calc(10px * var(--ratio)) 0 calc(31px * var(--ratio)) 0;
  background-color: #fff;
}
.buttons {
  position: absolute;
  bottom: 0;
  background-color: #fff;
  padding: calc(15px * var(--ratio)) calc(10px * var(--ratio))
    calc(35px * var(--ratio)) calc(10px * var(--ratio));
}

/deep/.van-field__control:read-only {
  color: #000000;
  text-align: end;
}

/* 底部按钮 */
::v-deep.toolbar {
  background-color: #fff;
  height: 100px;
  .toolbar-inner {
    align-items: normal;
    padding-top: calc(30px * var(--ratio));
    .button {
      width: 100%;
    }
  }
}
/* 底部按钮容器上阴影 */
.toolbar-bottom::after {
  background-image: none;
}
</style>